<template>
  <a-modal
    :title="modalTitle"
    style="top: 20px"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-form-item style="display: none">
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名">
          <a-input
            placeholder="用户名"
            :disabled="disabled"
            v-decorator="['userName', { rules: [{ required: true, message: '请输入用户名' }] }]"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱">
          <a-input
            placeholder="邮箱"
            v-decorator="[
              'email',
              {
                rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }],
                validateTrigger: ['change', 'blur'],
              },
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机">
          <a-input
            placeholder="11位手机号"
            v-decorator="[
              'mobile',
              {
                rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }],
                validateTrigger: ['change', 'blur'],
              },
            ]"
          >
          </a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="昵称">
          <a-input
            v-decorator="[
              'nickName',
              {
                rules: [{ required: true, message: '请输入昵称' }],
              },
            ]"
            placeholder="起一个名字"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-select v-decorator="['status', { initialValue: '0', rules: [{ required: true, message: '请选择状态' }] }]">
            <a-select-option :value="'0'">正常</a-select-option>
            <a-select-option :value="'1'">禁用</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门">
          <a-tree-select
            v-decorator="['deptId', { rules: [{ required: true, message: '请选择部门' }] }]"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="deptTree"
            @change="onChange"
            placeholder="部门"
            treeDefaultExpandAll
          >
          </a-tree-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
           <TextArea placeholder="备注" v-decorator="['remark']" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拥有角色" hasFeedback>
          <a-select
            style="width: 100%"
            mode="multiple"
            v-decorator="['roleIds', { rules: [{ required: true, message: '请选择角色' }] }]"
            :allowClear="true"
          >
            <a-select-option v-for="role in roleAll" :key="role.id">{{ role.roleName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { getRoleAll, saveUser, getUser } from '@/api/system/sysUser'
import TextArea from '@/components/TextArea'
import pick from 'lodash.pick'
export default {
  name: 'UserModal',
  props: {
    deptTree: {
      type: Array,
      required: true,
    },
  },
  components: {TextArea},
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      roleAll: [],
      mdl: {},
      spinning: false,
      modalTitle: undefined,
      disabled: false,
      form: this.$form.createForm(this),
    }
  },
  beforeCreate() {},
  created() {
    this.loadRoleAll()
  },
  methods: {
    add() {
      this.modalTitle = '添加用户'
      this.form.resetFields()
      this.mdl = Object.assign({}, { id: 0, deptId: '' })
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'userName', 'email','mobile','nickName', 'status', 'roleIds', 'remark', 'deptId'))
      })
    },
    edit(record) {
      if (record.id > 0) {
        this.disabled = true
        this.modalTitle = '修改用户'
        this.spinning = true
        getUser(record.id).then((res) => {
          this.mdl = Object.assign({}, res.result)
          this.visible = true
          this.$nextTick(() => {
            this.form.setFieldsValue(
              pick(this.mdl, 'id', 'userName','email','mobile', 'nickName', 'status', 'roleIds', 'remark', 'deptId')
            )
            this.spinning = false
            // this.form.setFieldsValue({ ...record })
          })
        })
      }
    },
    onChange(value, label, extra) {
    },
    loadRoleAll() {
      getRoleAll().then((res) => {
        this.roleAll = res.result
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveUser(values)
            .then((res) => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.success(res.msg)
              }
            })
            .catch(() => {
              this.$message.error('系统错误，请稍后再试')
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  },
}
</script>
